<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>天气查询</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            perspective: 1000px;
            background: linear-gradient(-45deg, #955AE0, dodgerblue,#2911C4, rgba(215, 125, 215, 0.7));
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            overflow: hidden;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 阳光层 */
        .sunlight {
            position: absolute;
            top: -50%;
            left: 50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent 70%);
            transform: rotate(-30deg);
            z-index: 1;
            pointer-events: none;
        }

        /* 下雨Canvas */
        #rain-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }


        /* 云朵容器 */
        .clouds {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            overflow: hidden;
        }

        .cloud {
            position: absolute;
            top: 10%;
            left: -20%;
            height: 120px;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
            border-radius: 50%;
            animation: cloudMove 150s linear infinite;
            filter: blur(40px);
            opacity: 100;
        }

        .cloud:nth-child(1) { width: 400px; top: 10%; animation-duration: 5s; }
        .cloud:nth-child(2) { width: 600px; top: 30%; animation-duration: 8s; }
        .cloud:nth-child(3) { width: 500px; top: 50%; animation-duration: 10s; }
        .cloud:nth-child(4) { width: 700px; top: 20%; animation-duration: 7s; }

        @keyframes cloudMove {
            from { transform: translateX(0); }
            to { transform: translateX(120vw); }
        }

        /* 登录框：Glassmorphism 风格 */
        .login-container {
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            padding: 80px;
            border-radius: 55px;
            width: 600px;
            transform-style: preserve-3d;
            transition: all 0.2s ease-out;
            z-index: 4;
            position: relative;
            text-align: center;
        }

        .login-container h2 {
            font-size: 35px;
            color: #fff;
            margin-bottom: 25px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #fff;
            font-size: 15px;
        }


        .form-group input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 6px;
            background-color: rgba(255, 255, 255, 0.3);
            color: #333;
            backdrop-filter: blur(5px);
            font-size: 14px;
        }

        .form-group input[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: #ffffffbb;
            color: #333;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            font-size: 15px;
            transition: background 0.3s;
        }

        .form-group input[type="submit"]:hover {
            background-color: #ffffffff;
        }

        /* 积水层 */
        .puddle {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            z-index: 5;
            overflow: hidden;
            pointer-events: none;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
        }

        .puddle::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 100%;
            background: repeating-radial-gradient(
                    circle,
                    rgba(255, 255, 255, 0.1),
                    rgba(255, 255, 255, 0.1) 5px,
                    rgba(255, 255, 255, 0.05) 10px,
                    rgba(255, 255, 255, 0.02) 20px
            );
            animation: wave 4s linear infinite;
            top: 0;
            left: 0;
            transform: rotateX(80deg);
            opacity: 0.4;
        }

        @keyframes wave {
            from { transform: translateX(0) rotateX(80deg); }
            to { transform: translateX(-50%) rotateX(80deg); }
        }
    </style>
</head>
<body>

<!-- 下雨Canvas -->
<canvas id="rain-canvas"></canvas>

<!-- 阳光 -->
<div class="sunlight"></div>

<!-- 云朵 -->
<div class="clouds">
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
</div>

<!-- 登录框 -->
<div class="login-container" id="login-box">
    <h2>登录</h2>
    <form onsubmit="return handleFormSubmission(event)">
        <div class="form-group">
            <label for="username">城市名称</label>
            <input type="text" id="username" name="username" required placeholder="请输入查询城市名称">
        </div>
        <div class="form-group">
            <input type="submit" value="查询">
        </div>
    </form>
</div>

<!-- 积水层 -->
<div class="puddle"></div>

<script>
    const rainCanvas = document.getElementById('rain-canvas');
    const ctxRain = rainCanvas.getContext('2d');

    let width, height;

    function resizeCanvas() {
        width = rainCanvas.width = window.innerWidth;
        height = rainCanvas.height = window.innerHeight;
    }

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    const rainDrops = [];

    class RainDrop {
        constructor() {
            this.x = Math.random() * width;
            this.y = Math.random() * height;
            this.length = Math.random() * 10 + 15; // 稍长一点
            this.width = Math.random() * 1.5 + 1.5; // 更宽一些
            this.speedY = Math.random() * 4 + 2;
            this.opacity = Math.random();
            this.radius = 0;
            this.hasHitGround = false;
        }

        draw(ctx) {
            if (!this.hasHitGround) {
                // 绘制更宽的雨滴（矩形）
                ctx.fillStyle = `rgba(200, 200, 255, ${this.opacity})`;
                ctx.fillRect(this.x, this.y, this.width, this.length);
            } else {
                // 只绘制一次涟漪
                ctx.beginPath();
                ctx.arc(this.x, height - 5, this.radius, 0, Math.PI * 2);
                ctx.strokeStyle = `rgba(200, 200, 255, ${1 - this.radius / 30})`;
                ctx.lineWidth = 1.5;
                ctx.stroke();
            }
        }

        update() {
            if (!this.hasHitGround) {
                this.y += this.speedY;
                if (this.y > height - 5) {
                    this.hasHitGround = true;
                    this.radius = 0;
                }
            } else {
                this.radius += 1;
                if (this.radius > 30) {
                    this.reset();
                }
            }
        }

        reset() {
            this.hasHitGround = false;
            this.y = 0;
            this.x = Math.random() * width;
            this.radius = 0;
        }
    }

    function createRain() {
        rainDrops.length = 0;
        for (let i = 0; i < 150; i++) {
            rainDrops.push(new RainDrop());
        }
    }

    function animateRain() {
        ctxRain.clearRect(0, 0, width, height);

        for (let drop of rainDrops) {
            drop.draw(ctxRain);
            drop.update();
        }

        requestAnimationFrame(animateRain);
    }

    createRain();
    animateRain();
</script>

<script>
    // 登录框鼠标交互
    document.addEventListener('mousemove', function(e) {
        const container = document.querySelector('.login-container');
        const x = e.clientX / window.innerWidth - 0.5;
        const y = e.clientY / window.innerHeight - 0.5;

        container.style.transform = `rotateY(${x * 20}deg) rotateX(${y * 20}deg) scale(1.05)`;
        container.style.boxShadow = `${x * 20}px ${y * 20}px 25px rgba(0, 0, 0, 0.25)`;
    });

    document.addEventListener('mouseleave', function() {
        const container = document.querySelector('.login-container');
        container.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)';
        container.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.1)';
    });
</script>

<script>
    // 表单提交处理
    function handleFormSubmission(event) {
        event.preventDefault(); // 阻止默认提交

        const supportedCities = ["朔州","平遥"];
        const city = document.getElementById("username").value.trim();

        if (city === "朔州") {
            window.open("https://www.weather.com.cn/weather/101100907.shtml", "_blank");            return false; // 阻止表单提交
        } if (city === "平遥"){
            window.open("https://www.weather.com.cn/weather1d/101100410.shtml#input", "_blank");            return false; // 阻止表单提交
        }
        else {
            alert("暂不支持该城市");
            return false; // 阻止表单提交
        }

        //return false;
    }
</script>

</body>
</html>
